<template>
	<div class="sqlist">
		<div class=" zanwei-top">
			<head-nav></head-nav>
			<ul class="sq_box" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
				<li class="community" v-for="(item,index) in artList" :key="index" @click="goDetail(item.ID)">
					<div v-if="item.IMGS && item.IMGS.length > 0">
						<!-- v-if="item.IMGS.length > 1" -->
						<mt-swipe class='communityImg' style="height: 5rem;" :auto="0" :showIndicators="false" >
							<mt-swipe-item v-for="(ite,idx) in item.IMGS" :key="idx">
								<div class="fph"><img class='banimg' :src="ite" /></div>
							</mt-swipe-item>
						</mt-swipe>
						<!--<div class="oneph" v-else>
							<img class='banimg' :src="item.IMGS[0]" />
						</div>-->
					</div>
					<div class='textbox'>
						<div class='communityTit'>{{item.ATITLE}}</div>
						<div v-if="item.NAME" class="pers">发布人: {{item.NAME}}</div>
						<div class='fbsj'>
							<div class="sendperson">
								<div> 发布时间：{{item.FBSJ}}</div>
							</div>
							
							<div class='u_zan'>
					          <!--点赞  -->
					          <img src='../../assets/img/dz.png' />
					          <span v-if="item.DZS">{{item.DZS}}</span>
					          <span v-else>0</span>
					        </div>
					        <div class="pl">
					        	<i class="iconfont icon-iconfontpinglun"></i>
					        	<span>{{item.plCount}}</span>
					        </div>
							<!--<span>共有 <span class='num'>{{item.plCount}}条</span> 评论</span>-->
						</div>
						<!--介绍  -->
						<!--<div class='js'>
							{{item.DTDESC}}
						</div>-->
					</div>
				</li>
				<div class="list-loading" v-if="loading">
			        <i class="iconfont icon-loading"></i> 加载中...
			    </div>
			    <div v-else>
			        <div class="forbid"  v-if="pnum>2">
			          到底了...
			        </div>
			      </div>
			</ul>
		      <div v-if="artList && artList.length === 0 && !loading">
		        <div class="forbid">
		          暂无信息...
		        </div>
		      </div>
			<!--<div class="sqbtn" @click="goSend">发布动态</div>-->
			<!--<div class="sqbtn2" @click="goSend"><i class="iconfont icon-jiashangplus33"></i></div>-->
			<!--<div class="tabNav">
				<div class="fir" @click="goSend">
					<i class="iconfont icon-fabu"></i>
					<span>发布</span>
				</div>
				<div class="sec" @click="myList">
					<i class="iconfont icon-liebiao"></i>
					<span>我的</span>
				</div>
			</div>-->
			<!--<div style="width: 100%;height: 0.8rem;"></div>-->
		</div>
		<Gmask :mshow="mshow"></Gmask>
	</div>
</template>

<script>
	import api from '@/api/api';
	import apiQues from '@/api/question';
	import Gmask from '@/components/common/Gmask';
    import {MessageBox, Toast, Swipe, SwipeItem } from 'mint-ui';
    
	export default {
		components: {
			Gmask
		},
		data() {
			return {
				artList: [],
				pnum: 1,
				prow: 6,
				forbid: false,
				loading: true,
				mshow: false,
				userid: '',
				tid: null
			}
		},
		methods: {
			loadMore() {
				let num = this.pnum + 1;
				if (this.forbid) {
		            return false
		        }
		        this.pnum = num;
		        this.loading = true;
		
		        this.getHtlist();
		        // this.loading = false;
		   },
			// 跳转详情
			goDetail(id) {
				this.$router.push({path: '/comment', query: {id: id}})
			},
			// 获取动态列表
			getHtlist() {
				let that = this;
				let num = this.pnum;
				let row = this.prow;
				let userid = this.userid;
				//  selectAllArticles
				apiQues.selectParticipateArticles(this,userid,num,row,function (res) {
		    		console.log('话题列表')
		    		let data = JSON.parse(res.data.data);
		    		console.log(data)
		    		if (data.code === 1) {
							let list = data.list;
		    			if (list.length > 0) {
		    				
		    				for (let i = 0;i < list.length;i++) {
		    					// 处理图片
			    				list[i].IMGS = list[i].AIMG.map(x => {
									return that.host.filehost + x.ID
								});
								// 点赞
								if (list[i].DZS >= 1000) {
									list[i].DZS = (list[i].DZS / 1000).toFixed(1) + 'K';
								}
								// 评论
								if (list[i].plCount >= 1000) {
									list[i].plCount = (list[i].plCount / 1000).toFixed(1) + 'K';
								}
			    			}
		    				that.artList = that.artList.concat(list);
		    			} else {
		    				that.forbid = true;
		    			}
		    		} else {
		    			Toast({
		    				message: data.msg,
		    				duration: 1500
		    			})
		    		}
		    		that.loading = false;
		    		clearTimeout(that.tid);
		    	});
			},
		},
		mounted() {
			let that = this;
			let userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
		    if (userinfo == null || userinfo.vipcode === "") {// 未登录
		    	that.mshow = true;
		        
		        return false;
		    } else {
		    	let userid = userinfo.vipcode;
		    	that.userid = userid;
		    	that.mshow = false;
		    	this.getHtlist();
		    	this.tid = setTimeout(function () {
		            that.loading = false;
		        }, 5000)
		    };
		}
	}
</script>

<style lang="less">
	.sqlist {
		background-color: #F4F4F4;
		min-height: 100vh;
		ul,li {
			list-style: none;
		}
		img {
			vertical-align: top;
		}
		.sq_box {
			width: 100%;
			padding: 0.2rem;
			box-sizing: border-box;
			.community {
				margin-bottom: 0.2rem;
				background-color: #ffffff;
				.oneph {
					/*padding-bottom:100%;*/
					position: relative;
					width: 100%;
					height: 5rem;
					display: flex;
					justify-content: center;
					align-items: center;
					overflow: hidden;
					img {
						/*position:absolute;
						top:0;
						bottom:0;
						left:0;
						right:0;*/
						width:100%;
						margin:auto;
					}
				}
				.communityImg {
					width: 100%;
					.fph {
						/*padding-bottom:100%;*/
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100%;
						height: 5rem;
						overflow: hidden;
						img {
							position:absolute;
							top:0;
							bottom:0;
							left:0;
							right:0;
							width:100%;
							margin:auto;
						}
					}
				}
			}
			.communityTit {
				font-size: 0.32rem;
				font-weight: bold;
				line-height: 0.44rem;
				text-align: left;
			}
			.communityImgt {
				width: 100%;
				height: 1rem;
				margin-bottom: 0.2rem;
			}
			/*.banimg {
				width: 100%;
				height: 100%;
			}*/
			.textbox {
				padding: 0.2rem;
			}
			.fbsj {
				display: flex;
				align-items: center;
				justify-content: space-between;
				/*border-bottom: 0.01rem solid #f4f4f4;*/
				padding: 0.1rem 0;
				padding-top: 0;
				color: #999999;
				.u_zan {
					display: flex;
					align-items: center;
					span {
						color: #f76c0f;
					}
					img {
						width: 0.44rem;
						height: 0.44rem;
					}
				}
				.sendperson {
					max-width: 4rem;
					div {
						line-height: 0.4rem;
						font-size: 0.28rem;
					}
				}
				.pl {
					width: 0.6rem;
					font-size: 0.26rem;
					span {
						margin-left: 0.02rem;
					}
				}
			}
			.pers {
				color: #666;
				font-size: 0.28rem;
				line-height: 0.4rem;
				margin-top: 0.1rem;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.fbsj span {
				font-size: 0.26rem;
			}
			.fbsj span .num {
				color: #f40;
			}
			.js {
				font-size: 0.3rem;
				color: #666666;
				padding-top: 0.2rem;
				line-height: 0.4rem;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
			}
		}
		.sqbtn {
			border-radius: 0.1rem;
			line-height: 0.56rem;
			padding: 0 0.2rem;
			position: fixed;
			right: 0.2rem;
			bottom: 10%;
			/*background-color: #FFFFFF;*/
			background-color: #F05DC4;
			color: #FFFFFF;
		}
		.sqbtn2 {
			width: 1rem;
			height: 1rem;
			border-radius: 50%;
			line-height: 0.56rem;
			position: fixed;
			right: 0.2rem;
			bottom: 10%;
			background-color: #F05DC4;
			line-height: 1rem;
			text-align: center;
			i {
				font-size: 1rem;
				color: #FFFFFF;
			}
		}
		.forbid {
			text-align: center;
			padding-bottom: 0.1rem;
		}
		.tabNav {
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			height: 0.86rem;
			width: 100%;
			background-color: #FFFFFF;
			div {
				border-top: 0.01rem solid #EEEEEE;
				flex: 1;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				i {
					font-size: 0.4rem;
				}
				span {
					margin-left: 0.04rem;
				}
			}
			.fir {
				border-right: 0.01rem solid #ccc;
			}
		}
	}
</style>